<template>
  <div class="flex h-[58px] w-full justify-between" :style="bgObj">
    <div
      v-for="(item, index) in info"
      :key="index"
      class="wrap-box flex flex-1 items-center justify-center"
    >
      <img
        :src="iconUrl"
        v-if="iconUrl && index == 0"
        class="h-[44px] w-[44px]"
      />
      <div class="flex flex-1 flex-col items-center">
        <span class="num">{{ item.num }}</span>
        <span class="title">{{ item.title }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="tsx">
import { ref } from 'vue';

defineProps({
  iconUrl: {
    type: String,
    default: '',
  },
  bgObj: {
    type: Object,
    default: () => {
      return {
        bgColor: '',
        opacity: 1,
      };
    },
  },
  info: {
    required: true,
    type: Array<{
      num: string | number;
      title: string;
    }>,
  },
});
</script>

<style lang="scss" scoped>
.wrap-box {
  .num {
    font-weight: 500;
    font-size: 24px;
    color: #ffffff;
  }
  .title {
    font-weight: 400;
    font-size: 14px;
    color: #ffffff;
  }
}

.wrap-box:not(:last-child) {
  position: relative;
  &::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(
      rgba(109, 178, 255, 0) 0%,
      rgba(109, 178, 255, 0.8) 50%,
      rgba(109, 178, 255, 0) 100%
    );
    opacity: 1;
  }
}
</style>
